﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MultiLine.aspx.cs" MasterPageFile="~/Site.master"
    Inherits="WS.EKA.Web.UI.Demo.MultiLine" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <link rel="stylesheet" type="text/css" href="/Styles/jquery.jqplot.min.css" />
    <script type="text/javascript" src="/Scripts/jquery.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.jqplot.js"></script>
    <!--ajax 请求-->
    <script type="text/javascript" src="/Scripts/plugins/jqplot.json2.js"></script>
    <!-- 点线图  -->
    <script type="text/javascript" src="/Scripts/plugins/jqplot.canvasTextRenderer.js"></script>
    <%-- <script type="text/javascript" src="/Scripts/plugins/jqplot.canvasAxisTickRenderer.js"></script>--%>
    <!--会影响x y轴label字体 -->
    <script type="text/javascript" src="/Scripts/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
    <script type="text/javascript" src="/Scripts/plugins/jqplot.highlighter.js"></script>
    <!-- 在图标上显示数字值-->
    <script type="text/javascript" src="/Scripts/plugins/jqplot.pointLabels.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            var cosPoints = [];
            for (var i = 0; i < 2 * Math.PI; i += 1) {
                cosPoints.push([i, Math.cos(i)]);
            }

            var sinPoints = [];
            for (var i = 0; i < 2 * Math.PI; i += 0.4) {
                sinPoints.push([i, 2 * Math.sin(i - .8)]);
            }

            var powPoints1 = [];
            for (var i = 0; i < 2 * Math.PI; i += 1) {
                powPoints1.push([i, 2.5 + Math.pow(i / 4, 2)]);
            }

            var powPoints2 = [];
            for (var i = 0; i < 2 * Math.PI; i += 1) {
                powPoints2.push([i, -2.5 - Math.pow(i / 4, 2)]);
            }

            $.jqplot('chart3', [cosPoints, sinPoints, powPoints1, powPoints2],
                {
                title: 'Line Style Options',
                // Set default options on all series, turn on smoothing.
                seriesDefaults: {
                    rendererOptions: {
                        smooth: true,
                        animation: {
                                show: true,
                                speed:2500
                        }
                    },
                    pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
                    
                },
                legend: {
                            show: true,
                            //nw  left top
                            //ne right top
                            //n  middle top
                            // e right center
                            // se right bottom
                            // s  middle bottom
                            // sw left bottom
                            //w left center
                            location: 'ne',     // compass direction, nw, n, ne, e, se, s, sw, w.
                            // inside outside
                            placement: 'intside',
                            xoffset: 12,        // pixel offset of the legend box from the x (or x2) axis.
                            yoffset: 12,        // pixel offset of the legend box from the y (or y2) axis.
                            labels :['严重','紧急','一般','不重要'],
                        },
                // Series options are specified as an array of objects, one object
                // for each series.

                series: [
                        {
                            // Change our line width and use a diamond shaped marker.
                            lineWidth: 2,
                            markerOptions: { style: 'dimaond' }
                        },
                        {
                            // Don't show a line, just show markers.
                            // Make the markers 7 pixels with an 'x' style
                            showLine: false,
                            markerOptions: { size: 7, style: "x" }
                        },
                        {
                            // Use (open) circlular markers.
                            markerOptions: { style: "circle" }
                        },
                        {
                            // Use a thicker, 5 pixel line and 10 pixel
                            // filled square markers.
                            lineWidth: 5,
                            markerOptions: { style: "filledSquare", size: 10 }
                        }
                    ],

              axes: {
                    yaxis: {
                      pad: 1.05,
                      //这里决定Y数据显示的格式 $%d -$2500 
                      //￥%d  -￥2345
                      tickOptions: { formatString: '%d%' },
                      label: '比例'
                    }
                }
            });
        });
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="chart3">
    </div>
</asp:Content>
